Skip to content

Roll icon definitions into themes (Theme.icons)#370

Open
CarlosNZ wants to merge 11 commits into
v2.0-devfrom
369-roll-icons-into-themes
Open

Roll icon definitions into themes (Theme.icons)#370
CarlosNZ wants to merge 11 commits into
v2.0-devfrom
369-roll-icons-into-themes

Conversation

@CarlosNZ

Copy link
Copy Markdown
Owner

Closes #369.

Themes now own their icon glyphs, not just their colours. The standalone icons prop is removed; a theme supplies glyphs via Theme.icons (keyed add/edit/delete/copy/ok/cancel/collection), each an IconDefinition (content plus optional viewBox/svgProps/scale). User-supplied glyphs are themeable through currentColor exactly like the built-ins, and per-instance overrides compose through the same theme layering as style overrides — one mechanism instead of two.

Core (json-edit-react)

  • New IconDefinition / ThemeIcons types; Theme gains icons?. IconReplacements and JsonEditorProps.icons removed.
  • Built-in glyphs are authored as IconDefinitions on defaultTheme.icons (each carrying its scale correction); defaultTheme.ts.tsx.
  • mergeIcons composes icons across the theme array (defaultTheme as layer 0), so the merged set is always complete — the renderer drops its per-name switch/fallback and derives the paint key by the naming invariant (icon + PascalCase).
  • The seven IconAddIconChevron components + IconProps are gone (their markup now lives in defaultTheme.icons). IconSvg is exported as the glyph renderer — pass an IconDefinition's parts; it owns the size baseline so the ratio constant stays internal.
  • The chevron glyph key is renamed collection; the collapse chevron stays hover-inert (no jer-icon).

@json-edit-react/utils

  • New iconFromSvg(svg): builds an IconDefinition from a raw SVG string (full <svg>…</svg> or bare inner markup), a React <svg> element (unwrapped via its props/children), or an existing IconDefinition (passthrough). String inputs are interned for inline referential stability — reuses a generalised intern promoted to a shared module (filters behaviour unchanged).

@json-edit-react/themes

  • Build readiness for themes that ship icons: react/react/jsx-runtime are kept external (never bundled), and react is declared an optional peer dep. No current theme ships glyphs yet.

Demo

  • The "Edit this theme!" dataset renders each IconDefinition as the actual themed glyph via the exported IconSvg (display-only) instead of the raw React-element internals.

Docs

  • README: documents Theme.icons / IconDefinition / the currentColor rule / scale; drops the icons prop row; updates the exports list.
  • Migration guide: new §15 — icons prop → theme.icons, JSX.ElementIconDefinition/iconFromSvg, chevroncollection, and the removed exports.
  • Changesets: core (major), utils (minor), themes (minor).

Breaking changes

  • icons prop removed → use theme.icons.
  • IconAddIconChevron, IconProps, IconReplacements no longer exported.
  • chevron icon key → collection.

Testing

  • New test/icons.test.tsx (core) and packages/utils/test/icon.test.tsx. Full suites green (643 core tests), lint clean, demo typechecks.

🤖 Generated with Claude Code

@github-actions

github-actions Bot commented Jun 17, 2026

Copy link
Copy Markdown

Bundle size impact

json-edit-react

Format Base raw PR raw Δ raw Base gzip PR gzip Δ gzip
esm 56.88 KB 56.55 KB 🟢 -334 B (-0.57%) 20.29 KB 20.23 KB 🟢 -65 B (-0.31%)
cjs 58.39 KB 58.01 KB 🟢 -381 B (-0.64%) 20.35 KB 20.27 KB 🟢 -87 B (-0.42%)

@json-edit-react/themes

Format Base raw PR raw Δ raw Base gzip PR gzip Δ gzip
esm 5.98 KB 5.98 KB ⚪ no change 1.69 KB 1.69 KB ⚪ no change
cjs 5.99 KB 5.99 KB ⚪ no change 1.65 KB 1.65 KB ⚪ no change

@json-edit-react/utils

Format Base raw PR raw Δ raw Base gzip PR gzip Δ gzip
esm 3.37 KB 4.62 KB 🔺 +1.25 KB (+37.11%) 1.49 KB 2.09 KB 🔺 +619 B (+40.62%)
cjs 3.46 KB 4.70 KB 🔺 +1.24 KB (+35.86%) 1.47 KB 2.09 KB 🔺 +627 B (+41.52%)

Measured from build/index.{cjs,esm}.js. Gzip at level 9.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant